<script setup>
import { ref,inject } from 'vue'
import { useRouter } from 'vue-router'
import { userStateStore } from '@/stores/userState'
const userState = userStateStore();

const router = useRouter(); // 获取当前路由对象

const global = inject('global');

const user = ref('a');
const password = ref('123as123');


function login(){
    global.axios({
        method: 'post',
        url: `${import.meta.env.VITE_API_URL}/api/users/login`,
        data: {
            user: user.value,
            password: password.value,
        }
    }).then(function (response) {
        if(response.data.code){
            localStorage.setItem('token',response.data.data.token);
            global.prompt('登陆成功');
            setTimeout(() => {
                router.replace('/')
            }, 2000);
            //
        }else{
            global.prompt('账号或者密码错误')
        }
    }).catch(function (error) {
        global.prompt('请求服务器失败')
        console.log(error);
    });
    
}
</script>
<template>
    <div class="loginBg">
        <div class="about">
            <h1>Window11-web</h1>
            <div class="input"> 账号：<input v-model="user"></div>
            <div class="input"> 密码：<input v-model="password"></div>

            <button @click="login">登录</button>
        </div>
    </div>
    
  </template>
<style>
.loginBg{ width: 100%; height: 100%; position: absolute; background-image: url('@/assets/bg2.jpg'); background-size:cover;}

.about{ width: 500px; margin: auto;}

.input{ color: #fff; margin: 10px 0; height: 38px; line-height:38px; font-size: 16px;}
.input input{ height: 38px; line-height:38px; padding-left: 10px;  font-size: 16px;border: none;  width: 400px;}

h1{ color: #fff; text-align: center; padding-top: 200px; padding-bottom: 60px; font-size: 60px;}

button{   height: 38px; width: 120px; text-align: center; margin-left:48px; font-size: 16px; color: #fff; background-color: rgba(255,255,255,0.2); border: 1px solid rgba(255,255,255,0.8);}
</style>
  